<template>
	<view class="login">
		<uni-card :is-shadow="true" class="login-card">
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position="top">
				<uni-forms-item label="手机号码" required name="mobile">
					<uni-easyinput v-model="valiFormData.mobile" placeholder="请输入手机号码" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput v-model="valiFormData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="text-right">找回密码?</view>
			<button class="mt15" type="primary" @click="submit('valiForm')">登录</button>
		</uni-card>
	</view>
</template>

<script>
import request from '../../api/request';

	export default {
		data() {
			return {
				valiFormData:{mobile:'',password:''},
				// 校验规则
				rules: {
					mobile: {
						rules: [
							{ required: true, errorMessage: '手机号码不能为空' },{ format: 'number', errorMessage: '手机号码只能输入数字' },
						]
					},
					password: {
						rules: [{ required: true, errorMessage: '密码不能为空' }]
					}
				},
			}
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					request('login','POST',this.valiFormData).then(res => {
						if(res.code != 200){
							uni.showToast({title: res.msg,icon: 'error',duration: 2000})
							return;
						}
						uni.setStorageSync('token', res.token);
						uni.setStorageSync('user', res.user);
						uni.setStorageSync('project',res.user.projects[0])
						uni.switchTab({
							url: '/pages/index/index'
						});
					}).catch(err => {
						console.log(err)
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style>
.login{background-image: url('https://project-1310548517.cos.ap-shanghai.myqcloud.com/login.jpg');background-repeat: no-repeat;background-size: 100% 100%;position: absolute;width: 100%;height: 100%;}
.login-card{top: 120px;margin: 30px !important;padding: 18px !important;}
</style>
